<script setup>
import {ref, reactive, onMounted} from 'vue'
import {Search, Plus, Delete, User, More, Edit} from '@element-plus/icons-vue'
import Add from "./add.vue"
import {getKnowledgeBaseList, deleteKnowledgeBase} from "@/api/knowledgebase"
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router"

const router = useRouter()

const pageInfo  = ref({
  page: 1,
  rows: 20,
  data: []
})

const searchForm = ref({
  name: '',
  page: 1,
  rows: 20
})

const handleId = ref(null)

onMounted(() => {
  search()
})

const search = () => {
  getKnowledgeBaseList(searchForm.value).then(res => {
    pageInfo.value = (res)
  })
}

const handleCommand = (command, id) => {
  if (command === 'delete') {
    ElMessageBox.confirm(
        '确认删除吗?',
        'Warning',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
    ).then(() => {
      deleteKnowledgeBase({idList: [id]}).then(res => {
        ElMessage.success("删除成功");
        search()
      })
    }).catch(() => {

    })
  }
  if (command === 'edit') {
    handleId.value = id
    dialogVisible.value = true
  }
}

const dialogVisible = ref(false)

const toKnowledgeList = (kb_id) => {
  router.push({path: "/knowledge/list", query: {kb_id: kb_id}})
}

</script>

<template>
  <div class="knowledge-wrap">
    <div class="knowledge-search">
      <div>
        <h1>
          欢迎回来, AI
        </h1>
        <p>今天我们要使用哪个知识库？</p>
      </div>
      <div>
        <el-input
            v-model="searchForm.name"
            style="width: 240px"
            placeholder="搜索"
            :prefix-icon="Search"
        />
        <el-button type="primary" style="margin-left: 10px" :icon="Plus" @click="dialogVisible = true">创建知识库</el-button>
      </div>
    </div>
    <div class="knowledge-content">
      <div class="item-container">
        <div class="item" v-for="el in pageInfo.data" :key="el.id" @click="toKnowledgeList(el.id)">
          <div style="display: flex; justify-content: space-between">
            <el-icon style="margin-top: 10px">
              <User/>
            </el-icon>
            <el-dropdown @command="(command) => handleCommand(command, el.id)">
              <span class="el-dropdown-link">
                <el-icon><More /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="delete"><el-link :icon="Delete"  style="float: right; color: #2c3e50"/><span>删除</span></el-dropdown-item>
                  <el-dropdown-item command="edit"><el-link :icon="Edit" style="float: right; color: #2c3e50"/><span>修改</span></el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <h3 style="height: 200px; line-height: 200px">
            {{ el.name }}
          </h3>
          <div style="font-size: 14px; height: 80px; line-height: 20px">
            <div style="font-weight: bold">
              <svg viewBox="64 64 896 896" focusable="false" data-icon="file-text" width="1em" height="1em"
                   fill="currentColor" aria-hidden="true">
                <path
                    d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"></path>
              </svg>
              <span style="padding:0 6px">{{ el.docNum }}</span>文档
            </div>
            <div style="font-weight: bold">
              <svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em"
                   fill="currentColor" aria-hidden="true">
                <path
                    d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
              </svg>
              <span style="padding-left: 6px">{{ el.createdTime }}</span>
            </div>
          </div>
        </div>
      </div>
      <!--        <el-pagination background layout="prev, pager, next" :total="1000" style="position: fixed; bottom: 80px; right: 80px"/>-->
    </div>
    <Add v-model="dialogVisible" @success="search" :id="handleId"></Add>
  </div>
</template>

<style scoped>
.knowledge-wrap .knowledge-search {
  display: flex;
  justify-content: space-between;
  text-align: left;
  margin-top: 30px;
}

.knowledge-content {
  margin-top: 60px;
}

.knowledge-content .item-container {
  display: flex;
  flex-wrap: wrap;
}

.knowledge-content .item-container .item {
  width: 300px;
  height: 300px;
  margin: 10px;
  border-radius: 12px;
  border: 1px solid #d9d9d9;
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: rgb(16 24 40 / 5%) 0px 1px 2px;
  text-align: left;
  padding: 10px;
  cursor: pointer;
}
</style>